<template>
  <div v-show="dialogShow" class="mask" @click="close"></div>
  <transition name="dialog">
    <div
      class="dialog"
      :class="dialogShow ? 'n-dialog-down' : 'n-dialog-up'"
      v-show="dialogShow"
      :closable="false"
      :show-icon="false"
    >
      <slot />
    </div>
  </transition>
</template>

<script setup lang="ts">
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const dialogShow = ref(props.show);
const emit = defineEmits(["update:show"]);
const close = () => {
  dialogShow.value = false;
  emit("update:show", dialogShow.value);
};
watch(
  () => props.show,
  (value) => {
    dialogShow.value = value;
  }
);
</script>
<style lang="scss" scoped>
.dialog {
  padding: 20px;
  background-color: azure;
  border-radius: 5px;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
@keyframes dialog-down {
  0% {
    transform: translate3d(-50%, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
.n-dialog-down {
  animation: dialog-down 0.4s;
}
@keyframes dialog-up {
  0% {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, 100%, 0);
    opacity: 0;
  }
}
.n-dialog-up {
  animation: dialog-up 0.4s;
}
.mask {
  position: fixed;
  z-index: 9998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
